import {memo} from 'react';
import {Upload, message, Button} from 'antd';
import {useCreation, usePersistFn} from 'ahooks';
import PropTypes from 'prop-types';
import {UploadOutlined} from '@ant-design/icons';

const Annex = props => {
    const {onChange, action} = props;
    // 类似的都可以做成配置，避免多个if else（好处：1 更优雅 2 性能更好）
    // 使用useCreation创建常量，类似于useRef （好处 1 使用更方便 2 避免性能隐患）
    const uploadHandleConfig = useCreation(() => (
        {
            uploading: name => console.log(`${name}上传中操作...`),
            done(name, res) {
                const {data} = res;
                // 表单包裹的组件可以从props获取onChange函数，可以通过onChange函数将值传入表单中
                (typeof onChange === 'function') && onChange(data?.fid);
                message.success(`${name}上传成功！`);
            },
            error: name => message.error(`${name}上传失败！`)
        }
    ), []);
    // 函数使用usePersistFn包裹，避免子组件产生不必要渲染
    const handleUploadChange = usePersistFn(info => {
        const {file} = info || {};
        // 注意兼容处理
        const {status, name, response} = file || {};
        // 赋值为变量，防止多次获取配置对象属性，注意要用可选链容错
        const uploadHandleFunc = uploadHandleConfig?.[status];
        // 判断为func防止报错
        (typeof uploadHandleFunc === 'function') && uploadHandleFunc(name, response);
    });
    return (
        <>
            <Upload
                action={action}
                onChange={handleUploadChange}
            >
                <Button icon={<UploadOutlined />}>上传文件</Button>
            </Upload>
        </>
    );
};

// 组件参数校验，是否为必传参数
Annex.propTypes = {
    onChange: PropTypes.func.isRequired,
    action: PropTypes.string.isRequired
};

// 组件使用memo包裹，默认进行浅比较，减少组件渲染次数
export default memo(Annex);
